/**
 * @page: 首页
 * @author:Elvis 
 */

import React, { useState, useEffect, useMemo } from 'react';
import { Skeleton } from 'antd';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import CommonLoading from '@/components/CommonLoading';
import DataBoard from './component/DataBoard';
import BasicProcess from './component/BasicProcess';
import Tools from './component/Tools';
import ProductSection from './component/ProductSection';
import ProdList from './component/ProdList/index';
import ProdDetail from './component/ProdDetail/index';
import styles from './index.module.less';
import { getNoticeOp, dyLarge } from './service';
import { useLocation } from 'react-router-dom';

const Home = () => {

	const [loading, setLoading] = useState(false);
	const [type, setType] = useState('');
	const [updateKey, setUpdateKey] = useState(0);
	const [notice, setNotice] = useState({});
	const location = useLocation();

	//1是老用户，2是新用户
	const isNewUser = localStorage.getItem("isOldSystemUser") == 2 ? true : false;

	const lastUpdateTime = useMemo(() => {
		return moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
	}, [updateKey])

	useEffect(() => {
		if (location.pathname == '/home') {
			setUpdateKey(updateKey + 1);
		}
	}, [location.pathname]);
  useEffect(()=>{
    getDyLargeFunc();
  }, [])
  

  const getNoticeFunc = async () => {
    setLoading(true);
    const { data, success } = await getNoticeOp();
    if(success){
      setNotice(data);
    }
    setLoading(false);
  }

  // 抖音大促活动
  const getDyLargeFunc = async () => {
    const { data, success } = await dyLarge();
    if(success){
      const {token,appId,appName,shopId,shopName} = data;
      console.log(token,appId,appName,shopId,shopName);
      ecopen.bixi(document.body,{
        componentId: 330,
        token,appId,appName,shopId,shopName
      })
    }
  }
 

	useEffect(() => {
		getNoticeFunc();
	}, [updateKey])

	const commonProps = {
		type,
		updateKey,
		handleSetType(value) {
			setType(value);
		}
	}

	const renderNotice = useMemo(() => {
		if (Object.keys(notice).length) {
			return (<div className={styles.editContent}>
				<div className={styles.subTitle}>{notice.title}</div>
				<div dangerouslySetInnerHTML={{ __html: notice.content.replace(/\s{3}/g, '<span style="display:inline-block;width:18px"></span>') }} style={{ overflow: "hidden" }}></div>
			</div>)
		} else {
			return (<>
				<div className={styles.subTitle}><Skeleton.Input active size='small' /></div>
				<div className='flex'>
					<Skeleton.Image active style={{ marginRight: '32px' }} />
					<Skeleton paragraph={{ rows: 4 }} />
				</div>
			</>)
		}
	}, [notice])

	const renderContent = () => {
		if (type) {
			if (type == '-999') {
				return <ProdList {...commonProps} />
			} else {
				return <ProdDetail {...commonProps} />
			}
		} else {
			return (<>
				{
					isNewUser ? null :
						<>
							<h3 className={styles.sectionTitle}>
								订单数据
								<span className='desc'>数据更新时间：{lastUpdateTime}</span>
								<span onClick={() => setUpdateKey(updateKey + 1)}><IconFont type='iconshuaxin' className='icon' /></span>
							</h3>
							<DataBoard {...commonProps} />
						</>
				}
				<div className={styles.mainContent}>
					<div className='leftContent'>
						<h3 className={styles.sectionTitle}>基础设置流程</h3>
						<BasicProcess  isNewUser={isNewUser} />
						<h3 className={styles.sectionTitle}>官方公告</h3>
						{renderNotice}
					</div>
					<div className='rightContent'>
						<h3 className={styles.sectionTitle}>基础工具</h3>
						<Tools />
						<h3 className={styles.sectionTitle}>产品更新<span className='more' onClick={() => setType('-999')}>更多</span></h3>
						<ProductSection {...commonProps} />
						<h3 className={styles.sectionTitle}>
							更多咨询
							<span className='desc'>关注{APP_TITLE}公众号</span>
							<img src="https://imgniu.zhaojiafang.com/front-web/ERP/zjfwxgongzhong.png" alt="" title="扫码关注我哦" />
						</h3>
					</div>
				</div>
			</>
			)
		}
	}

	return <div className="zjf-container-nof">
		{renderContent()}
		<CommonLoading loading={loading} />
	</div>;
}

export default React.memo(Home, () => {
	return true;
});
